<template>
  <el-tabs v-model="activeName" type="card">
    <el-tab-pane
      v-for="(item,index) in dclasses"
      :key="index"
      :label="item.dclassName"
      :name="'dclass-' + index"
    >
      <el-input
        v-model="deviceSerialno"
        placeholder="设备名称或编号"
        clearable
        prefix-icon="el-icon-search"
      />
      <template v-if="+item.dclass === dclassCodeMap.fkq && project.dg_serialno && false">
        <div class="h12" />
        <el-descriptions border :column="2" label-class-name="labelClass">
          <el-descriptions-item label="阀控">
            <el-tag type="success" class="mr12">打开：{{ fkqInfo.fkqRun || 0 }}</el-tag>
            <el-tag type="info">关闭：{{ fkqInfo.fkqClose || 0 }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="阀门">
            <el-tag type="success" class="mr12">打开：{{ fkqInfo.fmRun || 0 }}</el-tag>
            <el-tag type="info" class="mr12">关闭：{{ fkqInfo.fmClose || 0 }}</el-tag>
            <el-tooltip class="item" effect="dark" :content="getFmTroubleSerialnos()" placement="top">
              <el-tag type="danger">故障：{{ fkqInfo.fmTrouble || 0 }}</el-tag>
            </el-tooltip>
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <div class="h12" />
      <div class="device-list">
        <div
          v-for="(citem,cindex) in item.data.filter((val) => {
            if(deviceSerialno){
              return val.map_show > 0 && (val.name.indexOf(deviceSerialno) > -1 || val.serialno.indexOf(deviceSerialno) > -1)
            }
            return val.map_show > 0
          })"
          :key="cindex"
          class="device"
          @click="showDevice(citem)"
        >
          <dl>
            <dt>
              <el-image
                class="image"
                :src="getDeviceImage(citem)"
                :style="getDeviceStyle(citem)"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
              <em class="mr32">{{ citem.name }}
                <i v-if="citem.product_type != 99" :style="getDatatimeStyle(citem.states)">{{ getDatatime(citem.states) }}</i>
              </em>
            </dt>
            <dd>
              <span
                v-for="(ccitem,ccindex) in citem.rtuPortDisplays.filter((val) => {
                  return val.show_state
                }).slice(0,project.show_attr_number || 2)"
                :key="ccindex"
                class="mr16"
              >
                <em>{{ ccitem.name }}：</em>
                <b :class="getClass(citem.states[ccitem.namekey],ccitem)">{{ getDeviceState(citem.states[ccitem.namekey],ccitem, citem.states) }}
                  {{ citem.states[ccitem.namekey]?ccitem.unit:'' }}</b>
              </span>
            </dd>
          </dl>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDclasses, getDatatime, getDeviceState, getDeviceStatus, getDeviceImage } from '@/utils/device'
import { dclassMap, dclassCodeMap, runDict, closeDict } from '@/utils/constant'
import { uniqueArr } from '@/utils'
export default {
  name: 'DclassContainer',
  data() {
    return {
      fkqInfo: {
        fkqRun: 0,
        fkqClose: 0,
        fmRun: 0,
        fmClose: 0,
        fmTrouble: 0,
        fmTroubleSerialnos: []
      },
      dclassCodeMap,
      activeName: 'dclass-0',
      deviceSerialno: '',
      dclassMap,
      dclasses: [],
      initialImg: 'https://img.intelirri.com/device/czsb/d_break.png'
    }
  },
  computed: {
    ...mapGetters(['devices', 'project'])
  },
  watch: {
    devices: {
      handler(newVal) {
        this.formatDevices(newVal)
        this.getFkqInfo(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    getFmTroubleSerialnos() {
      if (this.fkqInfo.fmTroubleSerialnos.length > 0) {
        return this.fkqInfo.fmTroubleSerialnos.join('，')
      }
      return '无故障阀门'
    },
    getFkqInfo(devices) {
      const fkqs = devices.filter((val) => {
        return +val.product_type === dclassCodeMap.fkq
      }).map(val => {
        const res = val.states
        res.serialno = val.serialno
        res.name = val.name
        return res
      })
      let fkqRun = 0
      let fkqClose = 0
      let fmRun = 0
      let fmClose = 0
      let fmTrouble = 0
      let fmTroubleSerialnos = []
      fkqs.forEach((val) => {
        fkqRun += (val.DO & 4) > 0 ? 1 : 0
        fkqRun += (val.DO & 8) > 0 ? 1 : 0
        fmRun += Number(val.a3) > 3000 ? 1 : 0
        fmRun += Number(val.a4) > 3000 ? 1 : 0
        fmClose += Number(val.a3) < 100 ? 1 : 0
        fmClose += Number(val.a4) < 100 ? 1 : 0
        if ((Number(val.a3) >= 100 && Number(val.a3) <= 3000) || (Number(val.a4) >= 100 && Number(val.a4) <= 3000)) {
          fmTroubleSerialnos.push(val.serialno)
        }
      })
      fkqClose = fkqs.length * 2 - fkqRun
      fmTrouble = fkqs.length * 2 - fmRun - fmClose
      fmTroubleSerialnos = uniqueArr(fmTroubleSerialnos)
      this.fkqInfo = {
        fkqRun,
        fkqClose,
        fmRun,
        fmClose,
        fmTrouble,
        fmTroubleSerialnos
      }
    },
    formatDevices(devices) {
      this.dclasses = getDclasses(devices).filter(val => {
        return ![dclassCodeMap.fm, dclassCodeMap.zypz, dclassCodeMap.db].includes(+val.dclass)
      })
    },
    getDeviceStatus(device) {
      return getDeviceStatus(device)
    },
    getDatatime(states) {
      if (states && states.datatime) {
        return getDatatime(states.datatime, states)
      }
      return '--'
    },
    getDatatimeClass(states) {
      if (this.getDatatime(states).length === 8) {
        return 'color-info'
      }
      return 'color-danger'
    },
    getDatatimeStyle(states) {
      if (this.getDatatime(states).length === 8) {
        return { color: '#999' }
      }
      return { color: '#ff4949' }
    },
    getDeviceState(value, rtuPortDisplay, states) {
      return getDeviceState(value, rtuPortDisplay, states)
    },
    getClass(value, item) {
      if (runDict.includes(this.getDeviceState(value, item, item.states))) {
        return 'color-success'
      }
      if (closeDict.includes(this.getDeviceState(value, item, item.states))) {
        return 'color-danger'
      }
      return ''
    },
    getDeviceImage(device) {
      return getDeviceImage(device)
    },
    getDeviceStyle(device) {
      if (+device.product_type === +dclassCodeMap.qf) {
        const A = (device.states && device.states.A) || 90
        const degree = Math.round(A / 100)
        return {
          transform: `rotate(${degree - 90}deg)`,
          transition: 'transform 0.5s ease' // 可选的过渡效果
        }
      }
    },
    showDevice(currentDevice) {
      this.$emit('showDevice', currentDevice)
    }
  }
}
</script>

<style lang="scss" scoped>
i.color-danger{
  color:#ff0000
}
.device-list {
  max-height:400px;
  overflow-y:scroll;
  .device > dl{
    display:flex;
    align-items:center;
    padding:12px;
    cursor:pointer;
    &:hover{
      background:#f6f6f6;
    }
    dt{
      display:flex;
      align-items:center;
      .image{
        width:32px;
        height:32px;
        margin-right:12px;
      }
    }
    dd{
      margin-left:auto;
      span{
        margin-right:20px;
        font-size:14px;
        font-weight: bold;
        color:#000;
        em{
          font-weight: normal;
          color:#999;
          b{
            &.color-success{
              color:#13ce66
            }
            &.color-warning{
              color:#FFBA00
            }
            &.color-danger{
              color:#ff4949
            }
          }
        }
      }
    }
    em{
      font-style:normal;
      i{
        font-style:normal;
        font-size:14px;
        padding-left:12px;
        color:#999;
      }
    }
  }
}
</style>
